<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    搜索：<input type="text" id="input1" />
    <script>
      function debounce(fn, delay = 200) {
        let timer = 0;

        return function () {
          if (timer) clearTimeout(timer);

          timer = setTimeout(() => {
            fn.apply(this, arguments); // 透传 this 和参数
            timer = 0;
          }, delay);
        };
      }

      const input1 = document.getElementById('input1');
      input1.addEventListener('keyup', debounce(handleSearch, 300));
      // input1.addEventListener('keyup', handleSearch);

      function handleSearch() {
        logs();
        // debounce(logs, 300)();
      }
      function logs() {
        console.log('发起搜索', input1.value);
      }
    </script>
  </body>
</html>
